<template>
  <div class="main-children top-nav">
    <div class="top-nav-top">
      <div
        :style="{ visibility: show }"
        class="btn btn-text-center btn-active-back"
        @click="onReturnToList"
      >
        <span
          class="el-icon-arrow-left"
          style="font-size: 20px; margin-left: 10px"
        ></span>
        <span style="margin-left: 8px">{{ $t("common.back") }}</span>
      </div>
      <div
        v-if="showShopping"
        class="btn btn-text-img-center btn-active2"
        @click="onJumpToShopCart"
      >
        <span>{{ $t("common.shopcart") }}</span>
        <div
          style="
            position: relative;
            top: -20px;
            right: 28px;
            width: 26px;
            height: 26px;
            background: red;
            border-radius: 50%;
            text-align: center;
            line-height: 26px;
          "
          v-if="count > 0"
        >
          <span style="color: white; font-size: 14px">{{ count }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../common/api";
import encryption from "../common/encryption";
import ajax from "../common/ajax";

let userId;
let content;
let m;
let homeUrl;
export default {
  name: "ButtonGroup",
  props: {
    show: {
      default: "visible",
    },
    isEditorBack: {
      default: false,
    },
    showShopping: {
      default: true,
    },
    onParentReturnToList: Function,
    onParentReturnToBack: Function,
    backFun: Function,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    count() {
      return this.$store.state.cartShop.count;
    },
  },
  created() {
    userId = this.$route.query.userId;
    this.$store.dispatch("cartShop/saveData", userId);
    m = navigator.userAgent;
  },

  methods: {
    onReturnToList() {
      if (this.isEditorBack) {
        this.onParentReturnToList();
      } else if (this.$route.query.from === "center") {
        homeUrl = `/personal?culture=${this.$route.query.culture}&userId=${this.$route.query.userId}&pressId=${this.$route.query.pressId}`;
        this.onParentReturnToBack(homeUrl, true);
      } else if (this.$route.query.from === "import") {
        this.onParentReturnToBack("", false);
      } else if (this.$route.query.importRes == "true") {
        history.go(-1);
        this.$store.dispatch("cartShop/saveBlo", false);
      } else {
        history.go(-1);
      }
    },

    onJumpToShopCart() {
      let userId = this.$route.query.userId;
      let culture = this.$route.query.culture;
      let pressId = this.$route.query.pressId;
      this.$router.push({
        path: "/shopping",
        query: {
          userId: userId,
          culture: culture,
          pressId: pressId,
        },
      });
    },
  },
};
</script>

<style scoped>
.btn {
  width: 165px;
  height: 46px;
  background: #bcbcbc;
  border-radius: 4px;
  color: #4381e6;
  font-size: 18px;
  cursor: pointer;
}

.btn-active-back {
  width: 85px;
  margin-left: -10px;
  background: #ffffff;
}

.btn-active2 {
  height: 48px;
  float: right;
  padding-left: 10px;
  margin-right: -45px;
  background: url("../assets/images/btn_shoppingcart_nor.png") no-repeat;
}

.btn-text-center {
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 47px;
}

.btn-text-img-center {
  display: flex;
  align-items: center;
}

.btn-text-img-center > span {
  width: 140px;
  text-align: center;
  display: block;
}

.main-children {
  width: 100%;
  background: #fff;
  position: relative;
}

.top-nav {
  height: 70px;
  display: flex;
  align-items: center;
}

.top-nav-top {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
</style>
